<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <top></top>

        <div class="body-box">
          <dv-border-box-1>
            <div class="contentBox">
              <div class="item">
                <div class="leftTop">
                  <dv-border-box-13>
                    <left-top></left-top>
                  </dv-border-box-13>
                </div>
                <div class="leftCenter mt-10">
                  <dv-border-box-13>
                    <left-center></left-center>
                  </dv-border-box-13>
                </div>
                <div class="leftBottom mt-10">
                  <dv-border-box-13>
                    <left-bottom></left-bottom>
                  </dv-border-box-13>
                </div>
              </div>
              <div class="item">
                <div class="rightTop">
                  <div class="left">
                    <dv-border-box-12>
                      <right-top-left></right-top-left>
                    </dv-border-box-12>
                  </div>
                  <div class="right">
                    <div class="right1">
                      <dv-border-box-12>
                        <right-top1></right-top1>
                      </dv-border-box-12>
                    </div>
                    <div class="right2 mt-10">
                      <dv-border-box-12>
                        <right-top2></right-top2>
                      </dv-border-box-12>
                    </div>
                  </div>
                </div>
                <div class="mt-10">
                  <dv-border-box-13>
                    <div class="rightBottom">
                      <div class="bg-color-black">
                        <div class="item">
                          <right-bottom1></right-bottom1>
                        </div>
                        <div class="item">
                          <right-bottom2></right-bottom2>
                        </div>
                        <div class="item">
                          <right-bottom3></right-bottom3>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-13>
                </div>
              </div>
            </div>
          </dv-border-box-1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import top from '../components/top'
import leftTop from "./components/leftTop"
import leftCenter from "./components/leftCenter"
import leftBottom from "./components/leftBottom"
import rightTopLeft from "./components/rightTopLeft"
import rightTop1 from "./components/rightTop1"
import rightTop2 from "./components/rightTop2"
import rightBottom1 from "./components/rightBottom1"
import rightBottom2 from "./components/rightBottom2"
import rightBottom3 from "./components/rightBottom3"


export default {
  mixins: [ drawMixin ],
  data() {
    return {
      loading: true,
    }
  },
  components: {
    top, leftTop, leftCenter, leftBottom, rightTopLeft, rightTop1, rightTop2, rightBottom1, rightBottom2, rightBottom3
  },
  mounted() {
    this.cancelLoading()
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    goRouter(name){
      this.$router.push({name: name})
    }
  }
}
</script>

<style lang="scss">
@import '~@/assets/scss/index.scss';
</style>
<style scoped lang="scss">
  .contentBox{display: grid; grid-template-columns: 25% 75%; padding: 16px;}
  .mt-10 { margin-top: 10px}
  .rightTop {
    display: grid; grid-template-columns: 65% 35%;
  }
  .rightBottom {
    $box-width: 100%;
    $box-height: 320px;
    padding: 16px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
      height: $box-height - 30px;
      border-radius: 10px;overflow: hidden; display: grid; grid-template-columns: 33.3% 33.3% 33.3%;
      .item {  }
    }
  }
</style>
